<template>
    <div class="Registerbackground">
        <el-form
            :rules="rules"
            ref="RegisterForm"
            :model="RegisterForm"
            class="RegisterContainer"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <h3 class="RegisterTitle">用户注册</h3>
            <div @click="_changeAvatar">
                <el-tooltip
                    class="item"
                    effect="dark"
                    content="更换新头像"
                    placement="bottom"
                >
                    <el-avatar
                        class="avatarBox"
                        :size="150"
                        :src="chooseAvatar"
                    ></el-avatar>
                </el-tooltip>
            </div>
            <el-result
                v-if="isregister === 1"
                icon="success"
                title="注册成功"
                subTitle="返回登录页登录"
            >
                <template slot="extra">
                    <router-link to="/login">
                        <el-button type="primary" size="medium"
                            >返回登录</el-button
                        >
                    </router-link>
                </template>
            </el-result>
            <div v-if="isregister === 0">
                <el-form-item prop="nick">
                    <el-input
                        type="text"
                        v-model="RegisterForm.nick"
                        prefix-icon="el-icon-edit"
                        aria-autocomplete="false"
                        placeholder="请输入昵称"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input
                        type="text"
                        v-model="RegisterForm.username"
                        prefix-icon="el-icon-user-solid"
                        aria-autocomplete="false"
                        placeholder="请输入用户名"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="signature">
                    <el-input
                        type="text"
                        v-model="RegisterForm.signature"
                        prefix-icon="el-icon-bank-card"
                        aria-autocomplete="false"
                        placeholder="请输入个性签名"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        type="password"
                        v-model="RegisterForm.password"
                        prefix-icon="el-icon-lock"
                        aria-autocomplete="false"
                        placeholder="请输入密码"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="secpassword">
                    <el-input
                        type="password"
                        v-model="RegisterForm.secpassword"
                        prefix-icon="el-icon-lock"
                        aria-autocomplete="false"
                        placeholder="请再次输入密码"
                    ></el-input>
                </el-form-item>
                <el-button
                    ref="registerButton"
                    type="primary"
                    style="width: 100%"
                    @click="_register()"
                    :loading="loadingStatus"
                    >注册</el-button
                >
            </div>
        </el-form>
        <el-dialog title="选择新头像" :visible.sync="avatarChooseBoxVisible">
            <el-card class="avatarContain">
                <el-row>
                    <el-col :span="6" v-for="item in avatarList" :key="item.id">
                        <el-image
                            class="avataritem"
                            :src="item.url"
                            lazy
                            @click="_chooseAvatar(item.url)"
                        ></el-image
                    ></el-col>
                </el-row>
            </el-card>
            <span slot="footer" class="dialog-footer">
                <el-button @click="avatarChooseBoxVisible = false"
                    >关 闭</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import avatarApi from '../request/avatarApi';
import userApi from '../request/userApi';
export default {
    data() {
        var checkPassword = (rule, value, callback) => {
            if (value === this.RegisterForm.password) {
                return callback();
            }
            // 返回一个错误提示
            callback(new Error('两次输入的密码不一致'));
        };
        return {
            loadingStatus: false,
            isregister: 0,
            avatarList: [],
            avatarChooseBoxVisible: false,
            chooseAvatar:
                'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
            RegisterForm: {
                nick: '',
                username: '',
                signature: '',
                password: '',
                secpassword: '',
            },
            rules: {
                nick: [
                    {
                        required: true,
                        message: '请输入昵称',
                        trigger: 'blur',
                    },
                    {
                        min: 3,
                        max: 10,
                        message: '昵称长度在 3 到 10 个字符',
                        trigger: 'blur',
                    },
                ],
                username: [
                    {
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur',
                    },
                    {
                        min: 7,
                        max: 15,
                        message: '登录账号长度在 7 到 15 个字符',
                        trigger: 'blur',
                    },
                ],
                signature: [
                    {
                        required: true,
                        message: '请输入个性签名',
                        trigger: 'blur',
                    },
                    {
                        min: 5,
                        max: 20,
                        message: '个性签名长度在 5 到 20 个字符',
                        trigger: 'blur',
                    },
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                    {
                        min: 5,
                        max: 12,
                        message: '密码长度在 5 到 20 个字符',
                        trigger: 'blur',
                    },
                ],
                secpassword: [
                    {
                        required: true,
                        message: '请再次输入密码',
                        trigger: 'blur',
                    },
                    { validator: checkPassword, trigger: 'blur' },
                ],
            },
            checked: true,
            loading: false,
        };
    },
    created() {
         // 改变标签高亮状态
        this.$store.commit('changeSelectState', 7);
    },
    mounted() {},
    methods: {
        // 获取头像列表
        _changeAvatar() {
            avatarApi.getAllAvatar().then((res) => {
                this.avatarList = res.data;
                this.avatarChooseBoxVisible = true;
            });
        },
        _chooseAvatar(url) {
            this.chooseAvatar = url;
            this.avatarChooseBoxVisible = false;
        },
        _register() {
            // 校验字段通过
            this.$refs.RegisterForm.validate((valid) => {
                if (!valid) {
                    return;
                }
                this.$confirm('确认注册吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.loadingStatus = true;
                        userApi
                            .userregister(this.RegisterForm, this.chooseAvatar)
                            .then((res) => {
                                if (res.code === 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '注册成功',
                                    });
                                    this.isregister = 1;
                                    this.loadingStatus = false;
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: res.data.msg,
                                    });
                                }
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消注册',
                        });
                    });
            });
        },
    },
};
</script>
<style scoped>
.RegisterContainer {
    text-align: center;
    top: 5%;
    margin-left: 37%;
    border-radius: 15px;
    background-clip: padding-box;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeeea;
    box-shadow: 0 0 25px #cac6c6;
    position: absolute;
}
.RegisterTitle {
    margin: 0px auto 40px auto;
    text-align: center;
}
.RegisterRemember {
    text-align: left;
    margin: 0px 0px 15px 0px;
}
.el-form-item__content {
    display: flex;
    align-items: center;
}
.Registerbackground {
    height: 100%;
    width: 100%;
    background-image: url('../assets/img/R-C.jpg');
    background-size: cover;
}
.tip .rememberMe {
    float: left;
    margin-top: 10px;
}
.tip .forgetPw {
    float: right;
}
.tip {
    height: 50px;
}
.avatarBox {
    margin-bottom: 10px;
    cursor: pointer;
}
.avatarContain {
    text-align: center;
    height: 300px;
    overflow-y: scroll;
}
.avataritem {
    width: 150px;
    height: 150px;
    cursor: pointer;
}
</style>
